(function () {
  // 渲染
  render();

  // 添加留言
  const addBtn = document.querySelector('.comm-input .foot .btn');
  const textarea = document.querySelector('.comm-input textarea');
  addBtn.addEventListener('click', function () {
    if (!localStorage.getItem('token')) return alert('登录才可以发表');
    const content = document.querySelector('.comm-input textarea').value.trim();
    if (!content) return alert('请输入内容');
    addNote(content);
    textarea.value = '';
    document.querySelector('.word').innerHTML = `0/100`;
  });

  // 检测输入法，并记录文字数量
  let isChinese = false;
  textarea.addEventListener('compositionstart', function (ev) {
    // 该事件在开始输入中文时触发
    isChinese = true;
  });

  textarea.addEventListener('compositionend', function (ev) {
    // 该事件有在输入中文结束触发
    document.querySelector('.word').innerHTML = `${this.value.length}/100`;
    isChinese = false;
  });

  textarea.addEventListener('input', function () {
    // 输入英文时，触发
    if (isChinese) return;
    if (this.value.length <= 100) {
      document.querySelector('.word').innerHTML = `${this.value.length}/100`;
    }
  });

  // 键盘回车发布
  textarea.addEventListener('keyup', function (e) {
    if (e.key === 'Enter') {
      addBtn.click();
    }
  });

  // 删除留言
  const ul = document.querySelector('ul.comm-list');
  ul.addEventListener('click', function (e) {
    if (e.target.classList.contains('del')) {
      const id = e.target.dataset.id;
      // console.log(id)
      getNoteDetail(id);
    }
  });
  // 筛选
  document.querySelectorAll('.filter').forEach((item) => {
    item.onclick = function () {
      document.querySelectorAll('.filter').forEach((span) => {
        span.classList.remove('active');
      });
      orderBy = this.getAttribute('data-order');
      sortBy = this.getAttribute('data-sx');
      this.classList.add('active');
      pageNum = 1;
      render();
    };
  });

})();
